<template>
  <a-modal
    title="取消"
    width="600px"
    :visible.sync="visible"
    :confirmLoading="confirmLoading"
    @ok="submit"
    @cancel="handleCancel"
  >
    <div class="row-wrapper">
      <div class="title">客户信息</div>
      <a-row :gutter="12">
        <a-col :md="12" :sm="24" >姓名：{{row_record.name}}</a-col>
        <a-col :md="12" :sm="24" >客户卡号：{{row_record.cardNo}}</a-col>
      </a-row>
    </div>

    <div class="row-wrapper">
      <div class="title">填写取消信息</div>
<!--      <a-row :gutter="12" >-->
<!--        <a-col :span="24" >-->
<!--          <a-form :form="form" layout="vertical" labelAlign="left" >-->
<!--            <a-form-item label="取消时间" has-feedback>-->
<!--              <a-date-picker-->
<!--                show-time-->
<!--                :disabled-date="disabledDate"-->
<!--                placeholder="选择回访时间"-->
<!--                format="YYYY-MM-DD HH:SS"-->
<!--                v-decorator="['planScoutDate', {rules: [{ required: true, message: '请选择回访时间！' }]}]"-->
<!--              />-->
<!--            </a-form-item>-->
<!--          </a-form>-->
<!--        </a-col>-->
<!--      </a-row>-->
      <a-row :gutter="12" >
        <a-col :span="24" >
          <a-form :form="form" labelAlign="left" >
            <a-form-item label="取消原因" has-feedback>
              <a-textarea
                :rows="4"
                placeholder="请填写取消原因"
                v-decorator="['cancelReason', {rules: [{ required: true, message: '请填写备注信息！' }]}]"
              >
              </a-textarea>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>

<script>
import {receiveItem, sysUser, triageCancel} from '@/api/modular/main/customer/customerTriage'
import moment from 'moment'

export default {
  data(){
    return{
      row_record:{},
      receiveItemName:[], // 客户诉求
      sysUserArr:[], //咨询师
      value: [],
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      disabled:true,
      visible: false,
      visibleTable: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
    }
  },
  created() {

  },
  methods:{
    //时间格式化
    moment,
    //不可选择日期
    disabledDate(current) {
      return current && current < moment().endOf('day')
    },
    add (row_record) {
      this.row_record = row_record
      this.visible = true
      this.form.resetFields()
      //诉求项目
      receiveItem('1419922621584097282').then(res => {
        this.receiveItemName=res.data
      })
      //咨询师名单
      sysUser('1409402211439861762').then(res=>{
        this.sysUserArr=res.data
      })
    },
    //选择客户诉求
    clickSelectItem(index){

    },
    submit(){
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (errors) {
          console.log('表单校验未通过111')
          this.confirmLoading=false
          return
        }
        values.receiveId= this.row_record.tbReceiveId //接待表id
        values.tbTriageId= this.row_record.tbTriageId //分诊id
        console.log('表单校验通过222',values)
        triageCancel(values).then(res =>{
          console.log('提交结果为',res)
          if(res.code==200){
            this.$message.success({
              content:'取消成功',
              duration:.5,
              onClose:()=>{
                this.confirmLoading = false
                this.visible=false
                this.$parent.$refs.table.refresh()
              }
            })
          }else{
            this.$message.info({
              content:res.message,
              duration:0.5
            })
            this.confirmLoading = false
          }
        })
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    }
  }
}
</script>

<style scoped>
/deep/ .ant-card-head{
  border-bottom: none;
}
/deep/ .ant-card-body{
   padding: 0 24px;
}
/deep/ .ant-card-head-title{
  font-weight: bold;
}
/deep/ .ant-page-header-heading-title{
  font-weight: normal;
  font-size: 16px;
}
.row-wrapper{
  margin-bottom: 30px;
}
.row-wrapper .title{
  font-weight: 800;
  color: #000000;
  font-size: 16px;
  margin-bottom: 16px;
}
.receive-item-class{
  width: 72px;
  height: 24px;
  font-size: 14px;
  text-align: center;
  line-height: 23px;
  background: #F5F5F5;
  border-radius: 2px;
  border: 1px solid #D9D9D9;
}
</style>